<template>
  <div class="indicator-detail">
    <el-dialog :visible="visible" title="指标详情" width="50%" @close="cancel">
      <template #title>
        <span>指标详情</span>
        <span class="export" @click="exportExcel">
          <svg-icon iconClass="export" />
        </span>
      </template>
      <div class="content">
        <div class="condition">
          <!-- <el-button icon="el-icon-download" :loading="btnLoading" @click="exportExcel">导出Excel</el-button> -->
          <div class="filters">
            <span class="filter">
              <span class="label">渠道</span>
              <select-check-box v-model="queryParams.union_id" :selOptions="channelOpts" :props="{value:'channel_id',label:'name'}" doubleColumn checkAllLabel="全部渠道" @change="refresh" filterable>
              </select-check-box>
            </span>
            <span class="filter">
              <span class="label">权益包</span>
              <select-check-box v-model="queryParams.attr_id" :selOptions="packageOpts" checkAllLabel="全部业务" @change="refresh" />
            </span>
            <span class="filter">
              <span class="label">选择时间</span>
              <el-date-picker class="filter" v-model="queryParams.time_range" type="date" placeholder="选择日期" :clearable="false" value-format="yyyy-MM-dd" :pickerOptions="pickerOptions" @change="refresh">
              </el-date-picker>
            </span>
          </div>
        </div>
        <div class="tab-header">
          <span class="title">数据详情</span>
          <div class="tab-header_items">
            <span class="tab-header_item" v-for="tab in tabs" :key="tab.value" :class="{active: activeTab === tab.value}" @click="tabClick(tab)">
              <svg-icon :iconClass="tab.icon" />
            </span>
          </div>
        </div>
        <div class="tab-content">
          <div class="tab-content_item" v-show="activeTab === 0">
            <iframe :src="iframeSrc1" frameborder="0" width="100%" height="100%"></iframe>
          </div>
          <div class="tab-content_item" v-show="activeTab === 1">
            <iframe :src="iframeSrc2" frameborder="0" width="100%" height="100%"></iframe>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import Mixin from '../mixin'
import { parseTime } from '@/utils/index'
import * as exportDoc from '@/utils/exportDoc'
export default {
  name: 'IndicatorDetail',
  mixins: [Mixin],
  props: {
    visible: {
      typeof: Boolean,
      default: false
    },
    indicator: {
      typeof: Object,
      required: true
    },
    packageOpts: {
      typeof: Array,
      default: () => ([])
    },
    channelOpts: {
      typeof: Array,
      default: () => ([])
    },
    params: {
      typeof: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      queryParams: {
        indicator: '',
        union_id: '',
        attr_id: '',
        time_range: '',
        ...this.params
      },
      iframeSrc1: '',
      iframeSrc2: '',
      activeTab: 0,
      tabs: [
        {
          icon: 'chart',
          value: 0
        },
        {
          icon: 'table',
          value: 1
        }
      ],
      btnLoading: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > new Date().setHours(0, 0, 0, 0)
        }
      }
    }
  },
  methods: {
    refresh () {
      if (this.activeTab === 0) {
        this.iframeSrc1 = this.getIframeSrc({
          ...this.queryParams,
          chart: 'base_time_line'
        })
      } else {
        this.iframeSrc2 = this.getIframeSrc({
          ...this.queryParams,
          chart: 'base_time_table',
          order_by: 'time+asc'
        })
      }
    },
    tabClick ({ value }) {
      if (this.activeTab === value) return
      this.activeTab = value
      this.refresh()
    },
    async exportExcel () {
      this.btnLoading = true
      const res = await this.getChartData({
        ...this.queryParams,
        chart: 'base_time_table',
        order_by: 'time asc'
      })
      const data = Array.isArray(res.data[0].result) && res.data[0].result[0].data
      await exportDoc.excel(`${this.indicator.title}指标详情（${this.queryParams.time_range}）`, (sheet, execlName, { tableList, tableKeys }) => {
        const columns = 'ABCDEFGHIJKLMNOPQRSTVUW'
        /* sheet.range(`A1:${columns.charAt(tableKeys.length - 1)}1`).merged(true).value(execlName).style({
          fontSize: 18,
          fontFamily: '微软雅黑',
          horizontalAlignment: 'center',
          verticalAlignment: 'center'
        }) */
        const rangeStyle = {
          fontSize: 14,
          fontFamily: '宋体',
          horizontalAlignment: 'center',
          verticalAlignment: 'center'
        }
        tableKeys.forEach((item, index) => {
          sheet.cell(`${columns.charAt(index)}1`).value(item.label).style(rangeStyle)
          sheet.column(columns.charAt(index)).width(22)
        })
        const rangeStyleText = {
          fontSize: 14,
          fontFamily: '宋体',
          horizontalAlignment: 'center',
          verticalAlignment: 'center'
        }
        tableList.map((item, index) => {
          const rowIndex = index + 2
          tableKeys.forEach((it, i) => {
            sheet.cell(`${columns.charAt(i)}${rowIndex}`).value(item[it.prop]).style(rangeStyleText)
          })
        })
      }, {
        tableList: (data || []).map(t => {
          return {
            time: parseTime(new Date(t.time).toISOString().slice(0, 16), '{y}-{m}-{d} {h}:{i}'),
            [this.indicator.id]: t[this.indicator.title]
          }
        }),
        tableKeys: [{
          prop: 'time', label: '时间'

        },
        {
          prop: this.indicator.id, label: this.indicator.title
        }]
      })
      this.btnLoading = false
    },
    cancel () {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible (newVal) {
      if (newVal) {
        this.queryParams = {
          ...this.queryParams,
          ...this.params,
          indicator: this.indicator.id
        }
        this.refresh()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.indicator-detail {
  .export {
    margin-left: 6px;
    cursor: pointer;
    &:hover {
      color: #4aa6fc;
    }
  }
  .condition {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: space-between;
    .filters {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .filter {
        display: flex;
        margin-right: 20px;
        align-items: center;
        .label {
          margin-right: 8px;
        }
      }
    }
  }
  .tab-header {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .tab-header_items {
      display: inline-flex;
      margin-left: 30px;
      border-radius: 2px;
      transition: all 0.3s;
      border: 1px solid rgba(0, 0, 0, 0.1);
      .tab-header_item {
        padding: 4px 16px;
        text-align: center;
        cursor: pointer;
        &:hover {
          background-color: rgba(0, 0, 0, 0.1);
        }
        &.active {
          color: #fff;
          background-color: #4aa6fc;
        }
      }
    }
  }
  .tab-content {
    height: 400px;
    .tab-content_item {
      height: 100%;
      iframe {
        border: 1px solid #efefef;
      }
    }
  }
}
</style>
